<template>
	<div class="list">
		<lang></lang>
		<curr-app></curr-app>
		<list-title :data="header"></list-title>
		<list-table :list="contentList" :tableLoading="tableLoading" :footer="true" :sort="true" @setSort="setSort" :pagination="pagination" :appid="appid">
			<template v-slot:data>
				<el-table-column prop="title" label="标题" ></el-table-column>
				<el-table-column prop="contentList" label="预览量(PC/移动)">
					<template slot-scope="scope">
						<span>{{ scope.row.pc_preview_count }}</span> /
						<span>{{ scope.row.mobile_preview_count }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="add_time" label="添加时间" width="150px"></el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import draggable from 'vuedraggable'
import {changeToBool, getSortData, judgeAuth} from "static/js/common.js"
import {ERROR} from "static/js/constant.js"
import Lang from "pc/common/Lang"
import CurrApp from "pc/common/CurrApp"

export default {
	inject: ['reload'],
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*头部数据*/
			header: {
				title: '内容列表',
				reload: true,
				buttons: []
			},
			currlang: '',//当前选择的语言
			contentList: [
				// {
				// 	id: 1,
				// 	title: '昊视科技',
				// 	pc_preview_count: 0,
				// 	mobile_preview_count: 0,
				// 	add_time: '',
				// },
			],
			tableLoading: true,
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
		};
	},
	components: {
		ListTitle,
		ListTable,
		draggable,
		Lang,
		CurrApp
	},
	created: function() {
		/*获取当前语言*/
		let lang = this.$localstorage.get('lang');
		this.currlang = lang?lang:'zh'

		/*获取所有企业数据*/
		this.getContentList()

	},
	methods: {
		/*获取内容列表*/
		getContentList: function(){
			if(this.$api.flagContentList != undefined){
				this.$baseURL(this.$domain.cms)
				this.$route.query.lang = this.currlang
				this.$get(this.$api.flagContentList, this.$route.query).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data.list != undefined && res.data.data.list.length > 0){
							this.contentList = []
							Object.keys(res.data.data.list).forEach((k) => {
								this.contentList.push (
									{
										id: res.data.data.list[k].content_id,
										title: res.data.data.list[k].title,
										pc_preview_count: res.data.data.list[k].pc_preview_count,
										mobile_preview_count: res.data.data.list[k].mobile_preview_count,
										add_time: res.data.data.list[k].add_time,
									}
								);
							})
							this.pagination = res.data.data.pageInfo
						}
					}
				})
				.catch(err => {
					let error = ERROR.SER404
					if(err.response != undefined  && err.response.status == 500){
						error = ERROR.SER500
					}
					this.$message({
						showClose: true,
						message: error,
						type: 'error'
					});
				})
				.finally(() => {
					this.tableLoading = false
				}) 
			}else{
				this.$message({
					showClose: true,
					message: '没有内容列表的权限',
					type: 'error'
				});
			}
		},
		/*排序*/
		setSort(newIndex, oldIndex){
			this.contentList = JSON.parse(JSON.stringify(this.contentList))
			let oldVal = this.contentList.splice(oldIndex, 1)[0]
			this.contentList.splice(newIndex, 0, oldVal)
			// console.log(this.contentList)
			let newList = getSortData(this.contentList)
			let sort = []
			Object.keys(this.contentList).forEach((k) => {
				sort.push(this.contentList[k].id)
			})
			// console.log(sort)
			this.$baseURL(this.$domain.cms)
				this.$post(this.$api.contentFlagSort, {
					appid: this.appid,
					id: this.$route.query.id,
					lang: this.currlang,
					sort: sort
				}).then(res => {
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {
					let error = ERROR.SER404
					if(err.response != undefined  && err.response.status == 500){
						error = ERROR.SER500
					}
					this.$message({
						showClose: true,
						message: error,
						type: 'error'
					});
				})
				.finally(() => {}) 
		}
	},
    computed: {
    	
    }
};
</script>

<style lang="stylus" scoped>
</style>